<template>
  <view class="recordItem" @tap="clickItem">
    <TopInfo :data="data" />
    <AnswerContent v-if="answerContent" :content="answerContent" />
    <view v-else style="height: 24rpx"></view>
    <!-- <AnswerImage
      v-if="answerImgs && answerImgs.length > 0"
      :imgs="answerImgs"
    /> -->
    <AnswerOneImage
      v-if="answerImgs && answerImgs.length > 0"
      :imgs="answerImgs[0]"
    />
    <AnswerAudio v-if="answerAudio" :duration="answerAudio.duration || 0" />

    <AnswerVideo v-if="answerVideo" :cover="answerVideo" />
    <view
      class="recordItem-bottom row-center"
      v-if="classifyInfo || isShowRecordName"
    >
      <view
        class="recordItem-bottom-left"
        :class="{ 'recordItem-bottom-leftRecord': isShowRecordName }"
      >
        <kk-button
          v-if="classifyInfo"
          :text="classifyInfo"
          height="64"
          textLeft="16"
          background="#F7F7F7"
          textColor="#111111"
          textFont="24"
        />
      </view>
      <view class="recordItem-bottom-right">
        <kk-button
          v-if="isShowRecordName"
          :layout="kkButtonLayout.leftIcon"
          :iconSrc="collectionIcon"
          text="收录试题"
          height="64"
          :isLineBackground="true"
          textColor="#FFFFFF"
          textFont="26"
        />
      </view>
    </view>
    <view
      v-if="!isLast && (classifyInfo || isShowRecordName)"
      style="height: 24rpx"
    ></view>
    <kk-line v-if="!isLast" class="recordItem-line" />
    <view v-else style="height: 24rpx"></view>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from "@dcloudio/uni-app";
import { onMounted, ref } from "vue";
import { replaceImgTagWithText } from "@/utils/chat";

import { getChatTypeByAnswerContent } from "@/utils/chat";
import { KKConversationType } from "@/pagesA/answer/components/conversitonEnum";

import TopInfo from "@/pagesA/components/answer/topInfo.vue";
// import AnswerImage from "@/pagesA/components/answer/answerImage.vue";
import AnswerOneImage from "@/pagesA/components/answer/answerOneImage.vue";

import AnswerContent from "@/pagesA/components/answer/content.vue";
import AnswerVideo from "@/pagesA/answer/record/video.vue";
import AnswerAudio from "@/pagesA/answer/record/audio.vue";

import { kkButtonLayout } from "@/components/common/enmu";

import collectionIcon from "@/pagesA/static/images/common/collection_select.png";
import { computed } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
  status: {
    type: Number,
    default: 1,
  },
  isLast: {
    type: Boolean,
    default: false,
  },
});

const classifyInfo = computed(() => {
  let info = "";
  if (props.data.productName) {
    info += props.data?.productName;
  }
  if (props.data.classTypeName) {
    if (info) {
      info += `-${props.data?.classTypeName}`;
    } else {
      info += `${props.data?.classTypeName}`;
    }
  }
  if (props.data.cateName) {
    if (info) {
      info += `-${props.data?.cateName}`;
    } else {
      info += `${props.data?.cateName}`;
    }
  }
  if (props.data.subjectName) {
    if (info) {
      info += `-${props.data?.subjectName}`;
    } else {
      info += `${props.data?.subjectName}`;
    }
  }
  return info || "";
});

const isShowRecordName = computed(() => {
  if (props.data.recordStatus === 2) {
    // 已收录
    return true;
  }
  return false;
});

const answerContent = computed(() => {
  let jsonObj = JSON.parse(props.data?.problemDescription || "{}");
  let chatType = getChatTypeByAnswerContent(props.data?.problemDescription);
  if (chatType === KKConversationType.text) {
    return jsonObj.text || "";
  } else if (chatType === KKConversationType.richText) {
    return replaceImgTagWithText(jsonObj.text) || "";
  }
  return "";
});

const answerImgs = computed(() => {
  let jsonObj = JSON.parse(props.data?.problemDescription || "{}");
  let chatType = getChatTypeByAnswerContent(props.data?.problemDescription);
  if (chatType === KKConversationType.img) {
    return [jsonObj.text || ""];
  }
  return [];
});

const answerAudio = computed(() => {
  let jsonObj = JSON.parse(props.data?.problemDescription || "{}");
  let chatType = getChatTypeByAnswerContent(props.data?.problemDescription);
  if (chatType === KKConversationType.audio) {
    return { url: jsonObj.text || "", duration: jsonObj.duration || 0 };
  }
  return "";
});

const answerVideo = computed(() => {
  let jsonObj = JSON.parse(props.data?.problemDescription || "{}");
  let chatType = getChatTypeByAnswerContent(props.data?.problemDescription);
  if (chatType === KKConversationType.video) {
    return jsonObj.firstPic || "";
  }
  return "";
});

onLoad((options) => {});

const clickItem = () => {
  uni.navigateTo({
    url: `/pagesA/answer/detail?status=${props.status}&id=${props.data.id}`,
  });
};
</script>

<style lang="scss" scoped>
.recordItem {
  padding: 24rpx;
  padding-bottom: 8px;
  &-top {
    &-icon {
      width: 48rpx;
      height: 48rpx;
      background: #126efe;
      margin-right: 16rpx;
    }
  }
  &-content {
    margin-top: 24rpx;
    margin-bottom: 16rpx;
    line-height: 36rpx;
  }
  &-bottom {
    height: 64rpx;
    &-icon {
      margin-left: auto;
      width: 26rpx;
      height: 26rpx;
    }
    &-text {
      padding-left: 8rpx;
      font-weight: 500;
      font-size: 26rpx;
      color: #666666;
      line-height: 30rpx;
    }
    &-left {
      max-width: calc(100vw - 48rpx);
    }
    &-leftRecord {
      max-width: calc(100vw - 48rpx - 214rpx);
    }
    &-right {
      margin-left: auto;
    }
  }
}
</style>
